<template>
<div :class="$style.container">
  <group :gutter="0">
    <cell is-link :link="{path: '/updateUser' ,query: {name:'name'}}">
      <div slot="title">
        <i :class="['iconfont',$style.icon,'icon-wode']"/>
        <span :class="$style.text">{{$store.getters.user.name}}</span>
      </div>
      <div :class="$style.right">修改</div>
    </cell>
    <cell is-link :link="{path: '/updateUser' ,query: {name:'pwd'}}">
       <div slot="title">
        <i :class="['iconfont',$style.icon,'icon-mima']"/>
        <span :class="$style.text">修改登录密码</span>
      </div>
      <div :class="$style.right"></div>
    </cell>
    <cell is-link :link="{path: '/updateUser' ,query: {name:'avatar'}}">
       <div slot="title">
        <i :class="['iconfont',$style.icon]"/>
        <img v-lazy="$prefix +'downLoadFile?fileId=' + $store.getters.user.avatar" :class="$style.avatar">
      </div>
      <div :class="$style.right">更换</div>
    </cell>
    <cell is-link :link="{path: '/updateUser' ,query: {name:'gender'}}">
       <div slot="title">  
        <span :class="$style.text">性别</span>
        <i :class="['iconfont',$style.icon, 'icon-nan',$style.gender]" v-if="$store.getters.user.gender === 0"/>
        <i :class="['iconfont',$style.icon, 'icon-nv',$style.gender]" v-else/>
      </div>
      <div :class="$style.right">修改</div>
    </cell>
  </group>
  <div>
     <loading :show="showLoading" text="加载中..."></loading>
     <alert v-model="showAlert" title="提示" :content="tip"></alert>
  </div>
</div>
</template>

<script>
import { Group, Cell, Loading, Alert } from 'vux'
export default {
  data () {
    return {
      showLoading: false,
      showAlert: false,
      tip: ''
    }
  },
  components: {
    Group,
    Cell,
    Loading,
    Alert
  }
}
</script>

<style lang='less' module>
.container {
  .icon {
    font-size:20px;
    color: #999;
    vertical-align: middle;
  }
  .text {
    color: #999;
    font-size:14px;
  }
  .gender {
    color:#f09a99;
  }
  .avatar {
    width: 30px;
    height:30px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align:middle;
  }
  .right {
    color:#999;
    font-size:14px;
  }
}

</style>